<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 搜索关键词
const searchKeyword = ref('')

// 轮播图数据
const banners = ref([
  { image: '/static/first.png' },
  { image: '/static/second.png' },
  { image: '/static/third.png' },
])

// 分类导航数据
const categories = ref([
  { id: 1, name: '文学', icon: '/static/images/category/literature.svg' },
  { id: 2, name: '科技', icon: '/static/images/category/tech.svg' },
  { id: 3, name: '历史', icon: '/static/images/category/history.svg' },
  { id: 4, name: '艺术', icon: '/static/images/category/art.svg' },
])

// 推荐图书数据
const recommendBooks = ref([
  {
    id: 1,
    title: '三体',
    author: '刘慈欣',
    cover: '/static/images/books/santi.jpg',
  },
  {
    id: 2,
    title: '活着',
    author: '余华',
    cover: '/static/images/books/huozhe.jpg',
  },
])

// 最新帖子数据
const latestPosts = ref([
  {
    id: 1,
    title: '分享一本好书',
    content: '最近读了一本很棒的书，推荐给大家...',
    cover: '/static/images/posts/post1.jpg',
  },
  {
    id: 2,
    title: '读书心得',
    content: '读完这本书，我有一些感悟想分享...',
    cover: '/static/images/posts/post2.jpg',
  },
])

// 搜索处理
function handleSearch() {
  if (!searchKeyword.value)
    return
  // 存储搜索关键词到本地临时存储
  uni.setStorageSync('currentSearchKeyword', searchKeyword.value)
  uni.switchTab({
    url: '/pages/book/list/index', // 无需携带query参数
  })
}

// 跳转到分类页
function goToCategory(categoryId: number) {
  uni.navigateTo({
    url: `/pages/book/category/index?categoryId=${categoryId}`,
  })
}

// 跳转到图书列表
function goToBookList() {
  uni.switchTab({
    url: '/pages/book/list/index',
  })
}

// 跳转到图书详情
function goToBookDetail(bookId: number) {
  uni.navigateTo({
    url: `/pages/book/detail/index?id=${bookId}`,
  })
}

// 跳转到帖子列表
function goToPostList() {
  uni.switchTab({
    url: '/pages/post/list/index',
  })
}

// 跳转到帖子详情
function goToPostDetail(postId: number) {
  uni.navigateTo({
    url: `/pages/post/detail/index?id=${postId}`,
  })
}

// 跳转到通知列表
function goToNotification() {
  uni.navigateTo({
    url: '/pages/notification/list/index',
  })
}

// 页面加载时获取数据
onMounted(() => {
  // TODO: 调用API获取实际数据
})
</script>

<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input
        v-model="searchKeyword"
        type="text"
        placeholder="搜索图书"
        @confirm="handleSearch"
      >
      <view class="notification-icon" @click="goToNotification">
        <uni-icons type="notification" size="24" color="#666" />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 分类导航 -->
    <view class="category-nav">
      <view v-for="(item, index) in categories" :key="index" class="nav-item" @click="goToCategory(item.id)">
        <image :src="item.icon" mode="aspectFit" />
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 推荐图书 -->
    <view class="section">
      <view class="section-header">
        <text class="title">
          推荐图书
        </text>
        <text class="more" @click="goToBookList">
          查看更多
        </text>
      </view>
      <view class="book-list">
        <view v-for="(book, index) in recommendBooks" :key="index" class="book-item" @click="goToBookDetail(book.id)">
          <image :src="book.cover" mode="heightFix" />
          <text class="book-title">
            {{ book.title }}
          </text>
          <text class="book-author">
            {{ book.author }}
          </text>
        </view>
      </view>
    </view>

    <!-- 最新帖子 -->
    <view class="section">
      <view class="section-header">
        <text class="title">
          最新帖子
        </text>
        <text class="more" @click="goToPostList">
          查看更多
        </text>
      </view>
      <view class="post-list">
        <view v-for="(post, index) in latestPosts" :key="index" class="post-item" @click="goToPostDetail(post.id)">
          <view class="post-info">
            <text class="post-title">
              {{ post.title }}
            </text>
            <text class="post-desc">
              {{ post.content }}
            </text>
          </view>
          <image :src="post.cover" mode="aspectFill" class="post-image" />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 20rpx;
}

.search-bar {
  padding: 20rpx;
  background: #fff;
  width: 88%;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .notification-icon {
    margin-left: 20rpx;
    .iconfont {
      font-size: 40rpx;
      color: #666;
    }
  }

  input {
    width: 100%;
    height: 72rpx;
    background: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
  }
}

.banner {
  height: 300rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 30rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.category-nav {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20rpx;
    margin-top: 0px;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.section {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .more {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.book-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;

  .book-item {
    width: calc(50% - 20rpx);
    margin: 10rpx;

    image {
      width: 100%;
      height: 300rpx;
      border-radius: 8rpx;
      margin-bottom: 10rpx;
    }

    .book-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 6rpx;
      display: block;
    }

    .book-author {
      font-size: 24rpx;
      color: #666;
      display: block;
    }
  }
}

.post-list {
  .post-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .post-info {
      flex: 1;
      margin-right: 20rpx;

      .post-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }

      .post-desc {
        font-size: 24rpx;
        color: #666;
        display: block;
      }
    }

    .post-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
  }
}
</style>
